<template>
    <div>
        <Card>
            <!--搜索框-->
            <Form :model="search" ref="form1" label-position="right" :label-width="90" inline>
                <FormItem label="处理状态" prop="name">
                    <div class="filters-input">
                        <el-select v-model="search.state" placeholder="请选择处理状态" clearable>
                            <el-option v-for="item in options" :value="item.value" :key="item.value"
                                       :label="item.label">
                            </el-option>
                        </el-select>
                    </div>
                </FormItem>

                <FormItem label="起始日期" prop="hainaStatus">
                    <div class="filters-input">
                        <DatePicker type="daterange" v-model="search.theDate" placeholder="请选择日期"></DatePicker>
                    </div>
                </FormItem>

                <FormItem>
                    <Button type="primary" icon="ios-search" @click="handleQuery('form1')">搜索</Button>
                </FormItem>
            </Form>

            <!--内容 表单-->

            <el-table stripe border :loading="tableLoading" :data="tableData" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="id" label="ID"></el-table-column>
                <el-table-column prop="content" label="报修内容"></el-table-column>
                <el-table-column prop="address" label="报修地址"></el-table-column>
                <el-table-column label="报事报修来源">
                    <template slot-scope="scope">
                        <p v-if="scope.row.typeInt == 1" style="color:green">业主</p>
                        <p v-if="scope.row.typeInt == 3" style="color:blue">员工</p>
                    </template>
                </el-table-column>
                <el-table-column prop="telphone" label="联系电话"></el-table-column>
                <el-table-column prop="picUrl" label="图片">
                    <template slot-scope="scope">
                        <span :id="'images-' + scope.row.id"  style="display: flex; flex-direction: row; width: 100%; height: 45px;"  >
                            <img v-for="u in scope.row.picUrls"  :src="u" style="margin-right: 5px; width: auto; height: 100%" @click="HandleImg('images-' + scope.row.id)">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.state == 1" style="color:red">未处理</p>
                        <p v-if="scope.row.state == 2" style="color:blue">处理中</p>
                        <p v-if="scope.row.state == 3" style="color:green">已完成</p>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="报修时间"></el-table-column>
                <el-table-column prop="finishTime" label="完成时间"></el-table-column>
                <el-table-column label="完成评分">
                    <template slot-scope="scope">
                        <p v-if="scope.row.score == 1" style="color:red">一星</p>
                        <p v-if="scope.row.score == 2" style="color:red">二星</p>
                        <p v-if="scope.row.score == 3" style="color:blue">三星</p>
                        <p v-if="scope.row.score == 4" style="color:green">四星</p>
                        <p v-if="scope.row.score == 5" style="color:green">五星</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="describe( scope.row.id)"
                                   v-if="scope.row.state == 1">确认事物
                        </el-button>
                        <el-button size="mini" type="warning" @click="HandleState( scope.row.id)"
                                   v-if="scope.row.state == 2">完成事物
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>

        </Card>

        <!--报事报修图片-->
        <Modal v-model="formCode" title="报事报修" class="modal-content" width="450" :mask-closable="false">
            <div style="width: 430px; height: 430px; margin: 0 auto">
                <img :src="url" style="width: 420px;height: 430px"/>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" @click="cancelCode">确定</Button>
            </div>
        </Modal>
    </div>
</template>


<script>
    import Viewer from 'viewerjs'
    require('viewerjs/dist/viewer.css')
    import moment from "moment"


    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.search;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        params.typeInt = 1;

        //与后台交换数据
        this.postRequest("/api/reporting/loadDataTwo", params).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };


    export default {
        data() {
            return {
                search: {},
                pageSize: "",
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //数据表格隐藏那个状态
                tableLoading: false,
                formCode: false,
                url: "",
                options: [
                    {
                        value: "1",
                        label: "未处理"
                    },
                    {
                        value: "2",
                        label: "处理中"
                    },
                    {
                        value: "3",
                        label: "已处理"
                    }
                ],
                tableData: []
            };
        },

        created: function () {
            //加载数据
            this.loadData();
        },
        methods: {
            loadData,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            //查询
            handleQuery(name) {
                this.search.pageNum = 1;
                this.$refs[name].validate(valid => {
                    if (valid) {
                        this.search.theDate[0] = moment(this.search.theDate[0]).format("YYYY-MM-DD");
                        this.search.theDate[1] = moment(this.search.theDate[1]).format("YYYY-MM-DD");
                        console.log(this.search);
                        this.loadData();
                    }
                });
            },

            //查看图片
            HandleImg(id) {
                // this.url = picUrl;
                // this.formCode = true;
                new Viewer(document.getElementById(id));
            },
            //物业缴费二维码 formCode
            cancelCode() {
                this.formCode = false;
                this.url = "";
            },


            describe: function (id) {
                const params = {
                    businessKey: id ,
                    appKey:"bsbx-app"
                };
                this.postRequest("/api/activiti/starProcess", params).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        //this.$Message.success("操作成功!");
                        // this.pageNum = 1;
                        this.HandleState(id );
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 50
                        });
                    }
                });
                /*this.$prompt('请输入问题描述', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    const params = {
                        description: value,
                        id: id
                    };
                    if (value) {
                        this.postRequest("/api/reporting/startProcess", params).then(res => {
                            this.tableLoading = false;
                            if (res.code == 20000) {
                                this.$Message.success("操作成功!");
                                this.pageNum = 1;
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 50
                                });
                            }
                        });
                    } else {
                        this.$Message.warning({
                            content: "请输入问题描述",
                            duration: 50
                        });

                    }


                })*/
            },


            //处理状态
            HandleState(id) {
                this.getRequest("/api/reporting/updateState?id=" + id).then(res => {
                    console.log(res);
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.$Message.success("操作成功!");
                        this.pageNum = 1;
                        this.loadData();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 50
                        });
                    }
                });
            }
        }
    };
</script>
